<template>
	<body-wrap :isFlex='true' :showLoading="false">
		<view class="buymain">
			<view class="buyRadiusBox">
				<buy-list :type='2'/>
			</view>
			<mall-order-user-info v-if="orderInfo.orderType==1" :isEdit="false"/>
			<service-order-user-info v-if="orderInfo.orderType==2" :isEdit="false"/>
		</view>
		<template v-slot:footer>
			<view class="bbtbox">
				<!-- <order-botton @onclick="comfirm" :bottomText="orderType==2?'立即订购':'立即付款'"/> -->
				<order-botton @onclick="comfirm" :bottomText="orderInfo.orderType==1?'立即付款':'立即订购'"/>
			</view>
		</template>
	</body-wrap>
</template>

<script>
	import {defineComponent,reactive,toRefs,onMounted,getCurrentInstance,computed} from 'vue'
	import {onLoad,onShow} from '@dcloudio/uni-app'
	import { useStore } from 'vuex'
	import bodyWrap from "@/components/bodyWrap/index.vue"
	import buyList from '@/components/buyList/buyList.vue'
	import orderBotton from '@/components/orderBotton/orderBotton.vue'
	import {mallOrderUserInfo} from "../mallBuy/components/mallOrderUserInfo.vue"
	import {serviceOrderUserInfo} from "../mallBuy/components/serviceOrderUserInfo.vue"
	import {createGoodsOrder,createServiceOrder} from '@/api/index.js'
	import {toast} from "@/utils/common.js"
	export default defineComponent({
		components:{
			bodyWrap,
			buyList,
			orderBotton,
			mallOrderUserInfo,
			serviceOrderUserInfo
		},
		props:{
		
		},
		setup(props,context) {
			const store = useStore()
			const {proxy} = getCurrentInstance()
			
			const state = reactive({
				imgUrlPrefix:getApp().globalData.imgUrlPrefix,
				goods:computed(()=>store.state.base.goods), // 选择的商品
				orderInfo:computed(()=>store.state.base.orderInfo),
			})
			
			onMounted(()=>{
				
			})
			
			const comfirm = async ()=>{
				console.log("购买的商品信息:",state.goods)
				console.log("用户信息:",state.orderInfo)
				let goodsList=[]
				state.goods.forEach(item =>{
					goodsList.push({id:item.id,quantity:item.quantity})
				})
				let params={
					memberName:state.orderInfo.memberName,
					memberPhone:state.orderInfo.memberPhone,
					memberAddress:state.orderInfo.memberAddress,
					selfServiceFlag:state.orderInfo.selfServiceFlag
				}
				if(state.orderInfo.orderType==1){ // 商城类订单
					params.goods = goodsList
					params.serviceStationId = state.orderInfo.serviceStationId
					params.serviceStationName = state.orderInfo.serviceStationName
					const res = await createGoodsOrder(params)
					if(res.code == 0){
						//toast('1订单创建成功,准备支付...')
						wxPay(res.data.param,res.data.merchantId)
					}else{
						toast(res.msg)
					}
				}else if(state.orderInfo.orderType==2){// 服务类订单
					params.service = goodsList
					const res = await createServiceOrder(params)
					if(res.code == 0){
						//toast('2订单创建成功,准备支付...')
						wxPay(res.data.param,res.data.merchantId)
					}else{
						toast(res.msg)
					}
				}
				//console.log("接口参数：",params)
			}
			
			const wxPay = (params,merchantId)=>{
				uni.requestPayment({
				    provider: "wxpay", 
				    timeStamp: params.timeStamp,        // 时间戳（单位：秒）
				    nonceStr:params.nonceStr,
				    package:params.package,
				    signType:params.signType,
				    paySign:params.paySign,
				    success:ret=> {
						showModal('支付成功','/pages/home/home')
					},
				    fail:err=> {
						//showModal(JSON.stringify(err))
						const errMsg = JSON.stringify(err)
						if(errMsg.indexOf('cancel')>-1){
							uni.showToast({
								title: '取消支付',
								icon:'none'
							});
						}else{
							showModal(errMsg)
						}
					}
				})
			}
			
			const showModal = (content,url)=>{
				uni.showModal({
					title: '提示',
					content,
					showCancel:false,
					success(ret) {
						if (ret.confirm && url) {
							uni.switchTab({url})
						}
					}
				})
			}
			
			return {
				...toRefs(state),
				comfirm
			}
		}
	})
</script>

<style lang="scss" scoped>
	.buymain{
		padding: 0 30rpx;
		.buyRadiusBox{
			box-sizing: border-box;
			width: 100%;
			background: #fff;
			padding: 30rpx;
			border-radius: 30rpx;
			//box-shadow: 0 0 10rpx #afafaf;
			margin: 0 0 30rpx 0;
			&.eatTypeBox{
				padding: 0;
				.title{
					text-align: center;
					font-size: 34rpx;
					font-weight: bold;
					padding: 40rpx 0 0 0;
				}
				.sltype{
					width: 500rpx;
					margin:30rpx auto 0 auto;
					padding: 0 0 20rpx 0;
				}
				.canteenEat{
					box-sizing: border-box;
					margin: 0;
					padding: 0;
					.inputItem{
						display: flex;
						height: 90rpx;
						line-height:90rpx;
						border-bottom:1px solid #e3e3e3;
						padding:0 30rpx;
						font-size: 30rpx;
						.txt{
							width: 150rpx;
							color: #363535;
						}
						.myinput{
							display: block;
							height: 100%;
							line-height:90rpx; 
							vertical-align:middle;
							font-size: 30rpx;
						}
						.desc{
							flex: 1;
							text-align: right;
						}
						.rdbox{
							flex: 1;
							display: flex;
							align-items: center;
						}
					}
				}
			}
		}
		
	}
	.tabWrap{
		display: flex;
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 35rpx;
		border: 2rpx solid #fba70e;
		overflow: hidden;
		font-size: 32rpx;
		font-weight: 600;
		.item{
			flex: 1;
			text-align: center;
			&.selected{
				background: #fba70e;
			}
		}
	}
	.bbtbox{
		padding: 20rpx 30rpx;
	}
</style>
